<template>
	<div class="app-container">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>商品分类</span>
			</div>
			<div>
				<el-form :inline="true" class="demo-form-inline" style="margin-top: 15px">
					<el-form-item label="一级分类：" label-width="100px">
						<el-select v-model.trim="oneCate" placeholder="请选择一级分类" clearable filterable :disabled="true" @change="oneCateChange" @clear="clearOne">
							<el-option v-for="item in oneCateList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="二级分类：" style="margin-left: 40px">
						<el-select v-model.trim="twoCate" placeholder="请选择二级分类" clearable filterable :disabled="true">
							<el-option v-for="item in twoCateList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<el-card style="margin-top: 30px">
			<div slot="header" class="clearfix">
				<span>物流选择</span>
			</div>
			<span style="font-size: 14px">物流选择：</span>
			<el-radio-group v-model.trim="express.expressType" :disabled="true" @change="changeExpressType">
				<el-radio label="1">快递配送</el-radio>
				<el-radio label="2">自提地址</el-radio>
				<el-radio label="3">虚拟配送</el-radio>
			</el-radio-group>
			<div v-if="express.expressType == 1" class="expressZoneDiv">
				<div style="margin: 15px 0px">
					<span style="font-size: 14px">运费模板：</span>
					<el-select v-model.trim="express.expressTelId" placeholder="请选择模板" :disabled="true" @change="changeExpressTelId">
						<el-option v-for="(item, index) in templateList" :key="item.id" :label="item.emplateName" :value="item.id"></el-option>
					</el-select>
				</div>
				<div>
					<el-table v-loading="loading" stripe :data="zoneList" style="width: 750px" :border="true">
						<el-table-column :formatter="emptyToString" label="配送方式" align="center" prop="emplateType">
							<template slot-scope="scope">
								<span v-if="scope.row.emplateType == 1">包邮</span>
								<span v-if="scope.row.emplateType == 2">不包邮</span>
								<span v-if="scope.row.emplateType == 3">不配送</span>
							</template>
						</el-table-column>
						<el-table-column :formatter="emptyToString" label="地区" align="center" prop="provinceNames" />
						<el-table-column :formatter="emptyToString" label="快递费用" align="center" prop="postage" />
					</el-table>
				</div>
			</div>
			<div v-if="express.expressType == 2" class="selfmentionDiv">
				<el-table ref="selfMention" v-loading="selecLoading" stripe :data="selfMentionList" style="width: 901px" :border="true">
					<el-table-column :formatter="emptyToString" align="center" width="180" label="店铺名称" prop="storeName" />
					<el-table-column :formatter="emptyToString" align="center" width="180" label="店铺电话" prop="phone" />
					<el-table-column :formatter="emptyToString" align="center" width="180" label="可自提时间" prop="selfMentionTime" />
					<el-table-column :formatter="emptyToString" align="center" width="180" label="所在地区">
						<template slot-scope="scope"> {{ scope.row.provinceName }}{{ scope.row.cityName }}{{ scope.row.countyName }} </template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" align="center" width="180" label="详细地址" prop="addressDetail" />
				</el-table>
			</div>
		</el-card>
		<el-card class="box-card" style="margintop: 10px">
			<div slot="header" class="clearfix">
				<span>商品信息</span>
			</div>
			<el-form ref="form" :rules="rules" :model="form" label-width="150px">
				<el-form-item label="商品轮播图视频：">
					<div style="color: #f14a46; padding-left: 10px">*商品轮播图（图片要求：宽高相等且大于480px,大小3M内，拖拽可以调整顺序。）</div>
					<vuedraggable-upload-image v-model.trim="imgList"></vuedraggable-upload-image>
				</el-form-item>
				<el-form-item label="商品名称：" prop="name">
					<el-input v-model.trim="form.name" :disabled="true" />
				</el-form-item>
				<el-form-item label="商品描述：" prop="brief">
					<el-input v-model.trim="form.brief" :disabled="true" />
				</el-form-item>
				<el-form-item label="会员折扣：" prop="memberDiscount">
					<el-input v-model.trim="form.memberDiscount" style="width: 800px" :disabled="true">
						<template slot="append">折</template>
					</el-input>
				</el-form-item>
				<el-row>
					<el-col :span="8">
						<el-form-item label="销量：" prop="expectCommoditySales">
							<el-input v-model.trim="form.expectCommoditySales" placeholder="0" :disabled="true"> </el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="商品详情：">
					<div>（详情介绍商品以提升转化。若未编辑，商品发布后轮播图将自动填充至图文详情。）</div>
					<div style="display: flex; flex-wrap: wrap; margin-top: 15px; min-width: 1100px">
						<el-card shadow="always" class="avatar-box">
							<div class="box-preview">
								<div class="title">页面预览</div>
								<ul>
									<li v-for="(vaule, index) in previewImgList" :key="index">
										<img :src="vaule" alt="" />
									</li>
								</ul>
							</div>
						</el-card>
						<el-card shadow="always" class="box-preview-edit" style="margin-left: 10px">
							<div class="title">
								<div class="title-name">
									快速编辑
									<span class="tip">（*图片要求：宽高相等且大于480px,大小3M内。拖拽可调整顺序）</span>
								</div>
							</div>
							<div>
								<!--                <vuedraggable-upload-image v-model.trim="previewImgList"></vuedraggable-upload-image>-->
							</div>
						</el-card>
					</div>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="box-card" style="margintop: 10px">
			<div slot="header" class="clearfix">
				<span>规格与库存</span>
			</div>
			<el-table v-loading="normsLoading" stripe :data="normsList" style="width: 1100px">
				<el-table-column :formatter="emptyToString" label="序号" align="center" type="index" />
				<el-table-column :formatter="emptyToString" label="预览图" align="center">
					<template slot-scope="scope">
						<el-image style="width: 60px; height: 60px" :src="scope.row.picUrl" :preview-src-list="[scope.row.picUrl]"> </el-image>
					</template>
				</el-table-column>

				<el-table-column :formatter="emptyToString" label="商品规格" align="center" prop="attribute" />
				<el-table-column :formatter="emptyToString" label="价格" align="center" prop="retailPrice" />
				<el-table-column :formatter="emptyToString" label="供应价" align="center" prop="supplyPrice" />
				<el-table-column :formatter="emptyToString" label="划线价" align="center" prop="scribingPrice" />
				<el-table-column :formatter="emptyToString" label="库存数量" align="center" prop="inventory" />
				<el-table-column :formatter="emptyToString" label="排序" align="center" prop="sortOrder" />
				<!--        <el-table-column :formatter="emptyToString" label="操作" align="center" class-name="small-padding fixed-width">-->
				<!--          <template slot-scope="scope">-->
				<!--            <el-button-->
				<!--              type="info"-->
				<!--              @click="handleNormsUpdate(scope.row)"-->
				<!--              v-hasPermi="['system:norms:edit']"-->
				<!--            >编辑</el-button>-->
				<!--          </template>-->
				<!--        </el-table-column>-->
			</el-table>
			<el-dialog :title="normsTitle" :visible.sync="openNorms" width="500px" append-to-body>
				<el-form ref="normsForm" :model="normsForm" :rules="noemRules" label-width="100px">
					<el-form-item label="商品规格：" prop="attribute">
						<el-input v-model.trim="normsForm.attribute" placeholder="请输入商品规格" :disabled="true" />
					</el-form-item>
					<el-form-item label="商品价格：" prop="retailPrice">
						<el-input v-model.trim="normsForm.retailPrice" placeholder="请输入商品价格" />
					</el-form-item>
					<el-form-item label="供应价格：" prop="supplyPrice">
						<el-input v-model.trim="normsForm.supplyPrice" placeholder="请输入供应价格" :disabled="true" />
					</el-form-item>
					<el-form-item label="划线价格：" prop="supplyPrice">
						<el-input v-model.trim="normsForm.scribingPrice" placeholder="请输入划线价格" />
					</el-form-item>
					<el-form-item label="库存数量：" prop="inventory">
						<el-input v-model.trim="normsForm.inventory" placeholder="请输入库存数量" :disabled="true" />
					</el-form-item>
					<el-form-item label="图片：" prop="sortOrder">
						<el-image :src="normsForm.picUrl" />
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitNormsForm">保 存</el-button>
					<el-button @click="cancelNorms">取 消</el-button>
				</div>
			</el-dialog>
		</el-card>
		<div class="op-container">
			<el-button class="btn" @click="digShow">拒绝</el-button>
			<el-button type="primary" class="btn" @click="auditsupplier(1)">通过</el-button>
		</div>
		<el-dialog title="审核" :visible.sync="show" width="780px">
			<div class="content">
				<div class="content-info">
					<div class="info info-plus">
						<div>
							<span class="label">审批意见：</span
							><span class="text">
								<el-input v-model.trim="audit.auditOpinion" placeholder="请输入内容" type="textarea"></el-input>
							</span>
						</div>
					</div>
				</div>
				<div class="btn-box">
					<el-button type="primary" class="btn" @click="auditsupplier(0)">提交</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getToken } from '@/utils/auth';
import Editor from '@/components/Editor';
import vuedraggableUploadImage from '@/components/vuedraggable-upload-image';
import { listParent, listChild } from '@/api/mall/category';
import { addSupplierGoods, getInfoGoodsVo, querySupplierDetails, editSupplier, auditGoods } from '@/api/mall/goods';
import { allListTemplate } from '@/api/mall/template';
import { allListZone } from '@/api/mall/zone';
import { allListSelfmention } from '@/api/mall/selfmention';
import { allListNormsByAdmin, getNorms, delNorms, addNorms, updateNorms } from '@/api/mall/norms';
export default {
	name: 'Create',
	components: { Editor, vuedraggableUploadImage },
	data() {
		return {
			oneCate: '',
			twoCate: '',
			imgList: [],
			previewImgList: [],
			form: {},
			categoryList: [],
			brandList: [],
			newKeywordVisible: false,
			newKeyword: '',
			keywords: [],
			show: false,
			spec: {},
			specifications: [],
			products: [],
			multipleSpec: false,
			productForm: {},
			productVisible: false,
			attributeForm: {},
			attributeVisible: false,
			attributes: [],
			specVisible: false,
			rules: {
				brief: [{ required: true, message: '请填写商品描述', trigger: 'blur' }],
				name: [{ required: true, message: '请填写商品名字', trigger: 'blur' }],
				goodsType: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
				commoditySales: [{ required: true, message: '请填写销售数量', trigger: 'blur' }],
				expectCommoditySales: [{ required: true, message: '请填写商品销量', trigger: 'blur' }],
			},
			gallery: [],
			goodsTypeList: [],
			oneCateList: [],
			twoCateList: [],
			express: {
				expressType: '1',
				expressTelId: null,
			},
			loading: false,
			selecLoading: false,
			templateList: [],
			zoneList: [],
			selfMentionList: [],
			normsLoading: false,
			normsList: [],
			openNorms: false,
			// 表单参数
			normsForm: {},
			normsTitle: '',
			noemRules: {
				attribute: [{ required: true, message: '请输入商品规格', trigger: 'blur' }],
				retailPrice: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
				supplyPrice: [{ required: true, message: '请输入供应价格', trigger: 'blur' }],
				scribingPrice: [{ required: true, message: '请输入划线价格', trigger: 'blur' }],
				inventory: [{ required: true, message: '请填写库存数量', trigger: 'blur' }],
			},
			temporaryId: 0,
			audit: {},
		};
	},
	computed: {
		headers() {
			return {
				Authorization: 'Bearer ' + getToken(),
			};
		},
	},
	watch: {
		imgList(value) {
			console.log(value);
		},
	},
	created() {
		this.goodsId = this.$route.query.id;
		if (this.goodsId) {
			this.getDetails();
		}
		this.reset();
		this.getOneCateList();
		this.getTelList();
		this.getNormsList();
		//生成一个临时商品ＩＤ
	},
	methods: {
		digShow() {
			this.show = true;
		},
		auditsupplier(type) {
			auditGoods({
				auditOpinion: this.auditOpinion,
				id: this.goodsId,
				retailPrice: this.retailPrice,
				status: type,
			}).then((res) => {
				this.$message.success('操作成功!');
				this.show = false;
				this.$router.push('list');
			});
		},

		/** 搜索商品规格参数列表 */
		getNormsList() {
			this.normsLoading = true;
			allListNormsByAdmin({ goodsId: this.goodsId }).then((response) => {
				this.normsList = response.data;
				this.normsLoading = false;
			});
		},
		// 取消按钮
		cancelNorms() {
			this.openNorms = false;
			this.resetNorms();
		},
		// 表单重置
		resetNorms() {
			this.normsForm = {
				id: null,
				goodsId: null,
				attribute: null,
				supplyPrice: null,
				picUrl: null,
				inventory: null,
				counterPrice: null,
				delFlag: null,
				sortOrder: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				tenantId: null,
			};
			this.resetForm('normsForm');
		},
		/** 新增按钮操作 */
		handleNormsAdd() {
			this.resetNorms();
			this.openNorms = true;
			this.normsTitle = '添加商品规格参数';
		},
		/** 编辑按钮操作 */
		handleNormsUpdate(row) {
			this.resetNorms();
			const id = row.id || this.ids;
			getNorms(id).then((response) => {
				this.normsForm = response.data;
				this.openNorms = true;
				this.normsTitle = '编辑商品规格参数';
			});
		},
		/** 删除按钮操作 */
		handleNormsDelete(row) {
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delNorms([ids]);
				})
				.then(() => {
					this.getNormsList();
					this.msgSuccess('删除成功');
				});
		},
		/** 提交按钮 */
		submitNormsForm() {
			this.$refs['normsForm'].validate((valid) => {
				if (valid) {
					if (this.normsForm.id != null) {
						updateNorms(this.normsForm).then((response) => {
							this.msgSuccess('编辑成功');
							this.openNorms = false;
							this.getNormsList();
						});
					} else {
						this.normsForm.goodsId = this.temporaryId;
						addNorms(this.normsForm).then((response) => {
							this.msgSuccess('新增成功');
							this.openNorms = false;
							this.getNormsList();
						});
					}
				}
			});
		},
		changeExpressTelId(id) {
			this.getZoneList(id);
		},
		changeExpressType(value) {
			if (value != 2) {
				return;
			}
			this.getselfmentionList();
		},
		getselfmentionList() {
			this.loading = true;
			allListSelfmention().then((response) => {
				this.selfMentionList = response.data;
				this.loading = false;
			});
		},
		getTelList() {
			allListTemplate().then((response) => {
				this.templateList = response.data;
				this.express.expressTelId = this.templateList[0].id;
				this.getZoneList(this.templateList[0].id);
			});
		},
		getZoneList(query) {
			this.loading = true;
			allListZone({ templateId: query }).then((response) => {
				this.zoneList = response.data;
				this.loading = false;
			});
		},
		getRandom: function () {
			//随机生成9位
			let random = Math.floor((Math.random() + Math.floor(Math.random() * 8 + 1)) * Math.pow(8, 9));
			if (random.toString().length > 9) {
				random = Math.floor((Math.random() + Math.floor(Math.random() * 8 + 1)) * Math.pow(8, 9));
			}
			return random;
		},
		getDetails() {
			querySupplierDetails(this.goodsId).then((response) => {
				let { data } = response;
				console.log(data);
				this.form = data;

				this.previewImgList = JSON.parse(data.detail);
				this.imgList = JSON.parse(data.gallery);
				let gallery = JSON.parse(this.form.gallery);
				this.oneCate = data.topCategoryId;
				let twoCate = data.categoryId;
				listChild(this.oneCate).then((response) => {
					const { data } = response;
					const nodes = data.map((item) => ({
						value: item.id,
						label: item.name,
					}));
					this.twoCateList = nodes;
					this.twoCate = twoCate;
				});

				this.gallery = gallery.map((item) => ({ name: item, url: item }));
				this.keywords = this.form.keywords.split(',');
			});
			this.reset();
			this.getDicts('mall_goods_type').then((response) => {
				console.log(response);
				this.goodsTypeList = response.data;
			});
		},
		clearOne() {
			this.twoCate = '';
		},
		oneCateChange(value) {
			// this.twoCateList = []
			if (!value) {
				return;
			}
			this.twoCate = '';
			listChild(value).then((response) => {
				const { data } = response;
				const nodes = data.map((item) => ({
					value: item.id,
					label: item.name,
				}));
				this.twoCateList = nodes;
			});
		},
		getOneCateList() {
			listParent().then((response) => {
				const { data } = response;
				const nodes = data.map((item) => ({
					value: item.id,
					label: item.name,
				}));
				console.log(nodes);
				this.oneCateList = nodes;
			});
		},
		reset() {
			this.form = {
				id: null,
				goodsSn: null,
				name: null,
				categoryId: null,
				brandId: null,
				gallery: '',
				keywords: null,
				brief: null,
				isOnSale: null,
				sortOrder: null,
				picUrl: null,
				shareUrl: null,
				isNew: null,
				isHot: null,
				unit: null,
				counterPrice: null,
				retailPrice: null,
				contributionNum: null,
				detail: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
				salesDiscount: 10,
				commoditySales: 0,
				realSales: 0,
				inventory: 0,
				expectCommoditySales: 0,
			};
			this.spec = { specification: '', value: '', picUrl: '' };
			this.specifications = [{ specification: '规格', value: '标准', picUrl: '' }];
			this.products = [{ id: 0, specifications: ['标准'], price: 0.0, number: 0, url: '' }];
			this.productForm = {
				id: 0,
				specifications: [],
				price: 0.0,
				number: 0,
				url: '',
			};
			this.resetForm('form');
		},
		uploadPicUrl(res, file) {
			this.form.picUrl = res.url;
		},
		uploadOverrun() {
			this.$message({
				type: 'error',
				message: '上传文件个数超出限制!最多上传5张图片!',
			});
		},
		handleGalleryUrl(res, file) {
			this.gallery.push({ name: res.url, url: res.url });
			this.form.gallery = JSON.stringify(this.gallery.map((item) => item.url));
		},
		handleRemove(file, fileList) {
			this.gallery.slice(
				this.gallery.findIndex((item) => item === file.url),
				1
			);
			this.form.gallery = JSON.stringify(this.gallery.map((item) => item.url));
		},
		showInput() {
			this.newKeywordVisible = true;
			this.$nextTick((_) => {
				this.$refs.newKeywordInput.$refs.input.focus();
			});
		},
		handleInputConfirm() {
			const newKeyword = this.newKeyword;
			if (newKeyword) {
				this.keywords.push(newKeyword);
				this.form.keywords = this.keywords.toString();
			}
			this.newKeywordVisible = false;
			this.newKeyword = '';
		},
		handleClose(tag) {
			this.keywords.splice(this.keywords.indexOf(tag), 1);
			this.goods.keywords = this.keywords.toString();
		},
		uploadSpecPicUrl(res, file) {
			this.spec.picUrl = res.url;
		},
		handleSpecificationAdd() {
			let index = this.specifications.length - 1;
			for (let i = 0; i < this.specifications.length; i++) {
				const v = this.specifications[i];
				if (v.specification === this.spec.specification) {
					if (v.value === this.spec.value) {
						this.$message({
							type: 'warning',
							message: '已经存在规格值:' + v.value,
						});
						this.spec = {};
						this.specVisible = false;
						return;
					} else {
						index = i;
					}
				}
			}

			this.specifications.splice(index + 1, 0, this.spec);
			this.specVisible = false;
			this.specToProduct();
		},
		handleSpecificationDelete(row) {
			const index = this.specifications.indexOf(row);
			this.specifications.splice(index, 1);
			this.specToProduct();
		},

		handleSpecificationShow() {
			this.spec = { specification: '', value: '', picUrl: '' };
			this.specVisible = true;
		},
		specChanged(label) {
			if (label === false) {
				this.specifications = [{ specification: '规格', value: '标准', picUrl: '' }];
				this.products = [{ id: 0, specifications: ['标准'], price: 0.0, number: 0, url: '' }];
			} else {
				this.specifications = [];
				this.products = [];
			}
		},
		handleProductShow(row) {
			this.productForm = Object.assign({}, row);
			this.productVisible = true;
		},
		handleProductEdit() {
			for (let i = 0; i < this.products.length; i++) {
				const v = this.products[i];
				if (v.id === this.productForm.id) {
					this.products.splice(i, 1, this.productForm);
					break;
				}
			}
			this.productVisible = false;
		},
		uploadProductUrl(response) {
			this.productForm.url = response.url;
		},
		handleAttributeShow() {
			this.attributeForm = {};
			this.attributeVisible = true;
		},
		handleAttributeAdd() {
			this.attributes.unshift(this.attributeForm);
			this.attributeVisible = false;
		},
		handleAttributeDelete(row) {
			const index = this.attributes.indexOf(row);
			this.attributes.splice(index, 1);
		},
		handleCancel() {
			this.$router.push('/goods/list');
		},
		handlePublish() {
			if (this.imgList.length < 1) {
				this.$message.error('请上传商品轮播图视频!');
				return;
			}
			this.form.categoryId = this.twoCate;
			this.form.topCategoryId = this.oneCate;
			if (!this.form.categoryId) {
				this.$message.error('请选择商品分类!');
				return;
			}
			let gallery = JSON.stringify(this.imgList);
			let normsId = [];
			this.normsList.forEach(function (item) {
				normsId.push(item.id);
			});
			let goods = {
				name: this.form.name,
				goodsType: this.form.goodsType,
				// retailPrice:this.form.retailPrice,
				counterPrice: this.form.counterPrice,
				brief: this.form.brief,
				salesDiscount: this.form.salesDiscount,
				commoditySales: this.form.commoditySales,
				inventory: this.form.inventory,
				expectCommoditySales: this.form.expectCommoditySales,
				gallery,
				detail: JSON.stringify(this.previewImgList),
				categoryId: this.form.categoryId,
				supplyPrice: this.form.supplyPrice,
				topCategoryId: this.form.topCategoryId,
				logisticsId: this.express.expressType,
				templateId: this.express.expressTelId,
				norms: normsId,
			};

			this.$refs['form'].validate((valid) => {
				console.log(this.goodsId);
				if (!valid) {
					this.$message.warning('请填写商品信息');
				} else {
					if (this.goodsId) {
						goods.id = this.goodsId;
						console.log(goods);
						editSupplier(goods).then((response) => {
							this.$message.success('提交成功');
							this.$router.push('/goods/supplierGoodsList');
						});
					} else {
						addSupplierGoods(goods).then((response) => {
							this.$message.success('提交成功');
							this.$router.push('/goods/supplierGoodsList');
						});
					}
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.expressZoneDiv {
	height: 500px;
}
.selfmentionDiv {
	height: 500px;
	margin: 15px 0px;
}
::v-deep.avatar-box .el-card__body {
	padding-right: 0 !important;
}
.box-preview-edit {
	width: 800px;
	min-height: 500px;
	.title {
		border-bottom: 1px solid #f7f7f7;
		width: 100%;
		height: 43px;
		line-height: 43px;
		color: #2c333f;
		.tip {
			color: #f14a46;
			font-size: 10px;
		}
	}
}

.box-preview {
	height: 600px;

	//padding: 0 15px;
	/*padding: 0 15px;*/
	/*padding-top: 10px;*/
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		overflow-y: scroll;
		min-width: 242px;
		height: 570px;
		li {
			img {
				display: block;
				width: 242px;
				height: 242px;
			}
		}
	}
	.title {
		border-bottom: 1px solid #f7f7f7;
		width: 100%;
		height: 43px;
		line-height: 43px;
		color: #2c333f;
	}
}
.op-container {
	display: flex;
	justify-content: flex-start;
	margin-left: 500px;
	margin-top: 10px;
	.btn {
		width: 236px;
		height: 60px;
		border: 1px solid #707070;
		opacity: 1;
		padding: 0;
		line-height: 60px;
		text-align: center;
		border-radius: 4px;
		font-size: 18px;
	}
}
.text {
	font-size: 14px;
}

.item {
	padding: 18px 0;
}

.input-new-keyword {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 150px;
	height: 150px;
	line-height: 150px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.content {
	.content-info {
		.image__preview {
			display: flex;
			justify-content: center;
			.image {
				width: 329px;
				height: 162px;
				margin: 0 10px;
				display: block;
				border-radius: 8px;
			}
		}
		.info {
			display: flex;
			margin-bottom: 25px;

			> div {
				width: 50%;
				height: 40px;
				line-height: 40px;
				display: flex;
				color: #333333;
				justify-content: center;
				.label {
					width: 85px;
					font-size: 12px;
				}
				.text {
					width: 225px;
					//background: #F7F7F7;
					font-size: 14px;
					box-sizing: border-box;
					padding-left: 12px;
				}
			}
		}
		.info-plus {
			> div {
				width: 100%;
				.text {
					width: 593px;
				}
			}
		}
	}
}
</style>
